<template>
  <a-row type="flex" justify="center">
    <a-col :span="16">
      <a-card class="card">
        <!-- 标题 -->
        <a-row type="flex" justify="center">
          <a-col :span="23">
            <a-row type="flex" justify="space-between" align="bottom">
              <!-- title -->
              <div class="card-title-p">
                {{ this.title }}
              </div>
              <div class="card-title-more" @click="onClickImg">
                {{ `${this.more} >` }}
              </div>
            </a-row>
            <a-divider class="card-title-divider"/>
          </a-col>
        </a-row>
        <!-- 图集 -->
        <a-row type="flex" justify="center">
          <a-col :span="23">
            <a-row type="flex" justify="space-between">
              <a-col :span="11" v-for="(item,index) of imgUrls" :key="index">
                <a-row style="height: 17em">
                  <img :src="item.top" alt="" class="col-img" @click="onClickImg"/>
                </a-row>
                <a-row style="margin-top: 2em" type="flex" justify="space-between">
                  <a-col :span="11">
                    <img :src="item.bottomLeft" alt="" class="col-img" @click="onClickImg"/>
                  </a-col>
                  <a-col :span="11">
                    <img :src="item.bottomRight" alt="" class="col-img" @click="onClickImg"/>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: "shop",
  data() {
    return {
      title: "益农商城",
      more: "查看更多",
      clickUrl: 'https://www.yns0359.com',
      imgUrls: [
        {
          top: 'https://yns.yns0359.com/2020/12/019f5953f0574323958060c3968e7789.jpg',
          bottomLeft: 'https://yns.yns0359.com/2020/12/6168df421b504c9fa8a7a8f88f9cd8d5.jpg',
          bottomRight: 'https://yns.yns0359.com/2020/12/a4e5a7da807743efa8a43b65909e233e.jpg'
        },
        {
          top: 'https://yns.yns0359.com/2020/12/0939d306aadd4915b4712d22ae46b3f6.jpg',
          bottomLeft: 'https://yns.yns0359.com/2020/12/79728633c6d247d7ba4e3fdddcb5ba37.jpg',
          bottomRight: 'https://yns.yns0359.com/2020/12/8c876681456845e99549cc43ccc93f53.jpg'
        }
      ]
    }
  },
  methods: {
    onClickImg() {
      window.open(this.clickUrl)
    }
  }
}
</script>

<style lang="scss" scoped>

@import "/assets/styles/base";

.col-img {
  border-radius: 0.5em;
  height: 100%;
  width: 100%;

  &:hover {
    cursor: pointer;
  }
}
</style>
